<template>
  <div class="breadcrumb-container">
    <div class="breadcrumb-wrapper">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-breadcrumb-item>
        
        <el-breadcrumb-item 
          v-for="(item, index) in breadcrumbItems" 
          :key="index"
          :to="item.path"
        >
          <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="breadcrumb-extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRoute, RouteLocationNormalizedLoaded } from 'vue-router'
import { HomeFilled, User, Setting, List, Menu as IconMenu, Document, Tickets } from '@element-plus/icons-vue'

const route = useRoute()
const breadcrumbItems = ref<Array<{ title: string; path: string; icon?: string }>>([])

// 图标映射表
const iconMap: Record<string, string> = {
  '/profile': 'User',
  '/system/users': 'User',
  '/system/roles': 'Setting',
  '/system/permissions': 'Menu',
  '/dashboard': 'HomeFilled',
  '/system': 'Setting',
  '/orders': 'Tickets',
  '/reports': 'Document',
}

// 计算当前页面标题和图标
const currentTitle = computed(() => {
  cons
  if (breadcrumbItems.value.length > 0) {
    return breadcrumbItems.value[breadcrumbItems.value.length - 1].title
  }
  return route.meta.title || '首页'
})

const currentIcon = computed(() => {
  if (breadcrumbItems.value.length > 0) {
    return breadcrumbItems.value[breadcrumbItems.value.length - 1].icon
  }
  return iconMap[route.path] || null
})

// 根据当前路由生成面包屑
const generateBreadcrumb = (currentRoute: RouteLocationNormalizedLoaded) => {
  const items: Array<{ title: string; path: string; icon?: string }> = []
  
  // 处理多级路由
  if (currentRoute.matched && currentRoute.matched.length > 1) {
    // 跳过首页，从第二个开始
    for (let i = 1; i < currentRoute.matched.length; i++) {
      const match = currentRoute.matched[i]
      const title = match.meta.title as string || match.name as string || ''
      
      // 只添加有标题的路由项
      if (title) {
        items.push({
          title,
          path: match.path,
          icon: iconMap[match.path] || undefined
        })
      }
    }
  } 
  // 如果只有一级路由，但不是首页
  else if (currentRoute.meta.title && currentRoute.path !== '/') {
    items.push({
      title: currentRoute.meta.title as string || currentRoute.path,
      path: currentRoute.path,
      icon: iconMap[currentRoute.path] || undefined
    })
  }
  
  breadcrumbItems.value = items
}

// 监听路由变化，更新面包屑
watch(() => route.path, () => {
  generateBreadcrumb(route)
}, { immediate: true })
</script>

<style scoped>
.breadcrumb-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
}

.breadcrumb-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #303133);
  margin-bottom: 4px;
}

.page-icon {
  margin-right: 8px;
  font-size: 18px;
}

:deep(.el-breadcrumb) {
  font-size: 13px;
}

:deep(.el-breadcrumb__item) {
  display: flex;
  align-items: center;
}

:deep(.el-breadcrumb__inner) {
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-breadcrumb__inner .el-icon) {
  margin-right: 4px;
  font-size: 14px;
}

.breadcrumb-extra {
  display: flex;
  align-items: center;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .breadcrumb-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .breadcrumb-extra {
    width: 100%;
  }
}
</style> 